<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>登录博客后台</title>

    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="shortcut icon" th:href="@{/user/img/bloglogo.jpg}"/>

    <script src="js/jquery.js"></script>

    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/amazeui.min.js}"></script>
    <link rel="stylesheet" th:href="@{/assets/css/amazeui.min.css}"/>
    <link rel="stylesheet" th:href="@{/assets/css/app.css}"/>
</head>

<body>

<div class="log">
    <div class="am-g">
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-8 am-u-sm-centered log-content">
            <!--            <h1 class="log-title am-animation-slide-top" style="color: black;" th:text="#{login.welcomeTitle}">~欢迎登录博客~</h1>-->
            <h1 class="log-title am-animation-slide-top" style="color: black;">~欢迎注册博客~</h1>
            <br>
            <!--            <div th:if="${param.error}" style="color: red" th:text="#{login.error}">用户名或密码错误!</div>-->
            <!--            <div th:if="${param.error}" style="color: red">用户名或密码错误!</div>-->
            <span style="color: red" th:text="${error}"></span>
            <form class="am-form" id="loginForm" action="/toRegister" method="post">
                <div>
                    <!--                    <input type="hidden" name="url" th:value="${url}">-->
                    <input type="hidden" name="url">
                </div>
                <div class="am-input-group am-radius am-animation-slide-left">
                    <!--                    <input type="text" class="am-radius" th:placeholder="#{login.username}" name="username" />-->
                    <span id="errorUsername" style="color: red"></span>
                    <input type="text" id="username" onblur="checkUsername(this)" class="am-radius" placeholder="请输入用户名"
                           name="username" required/>
                    <span class="am-input-group-label log-icon am-radius">
                        <i class="am-icon-user am-icon-sm am-icon-fw"></i>
                    </span>
                </div>


                <br>
                <div class="am-input-group am-radius am-animation-slide-left">
                    <!--                    <input type="text" class="am-radius" th:placeholder="#{login.username}" name="username" />-->
                    <input type="email" onblur="checkEmailFormat(this)" class="am-radius" placeholder="请输入邮箱地址" name="email" required/>
                    <span class="am-input-group-label log-icon am-radius">
                        <i class="am-icon-user am-icon-sm am-icon-fw"></i>
                    </span>
                </div>


                <br>
                <div class="am-input-group am-animation-slide-left log-animation-delay">
                    <input type="password" class="am-form-field am-radius log-input" placeholder="请输入密码"
                           name="newPassword" required onblur="checkFirstPassword(this)"/>
                    <span class="am-input-group-label log-icon am-radius">
                        <i class="am-icon-lock am-icon-sm am-icon-fw"></i>
                    </span>
                </div>

                <br>
                <div class="am-input-group am-animation-slide-left log-animation-delay">
                    <span id="errorPassword" style="color: red"></span>
                    <input type="password" class="am-form-field am-radius log-input" placeholder="请确认密码"
                           name="password" required onblur="checkSecondPassword(this)" id="checkPassword"/>
                    <span class="am-input-group-label log-icon am-radius">
                        <i class="am-icon-lock am-icon-sm am-icon-fw"></i>
                    </span>
                </div>
                <div style="padding-top: 10px;">
                    <input type="submit" value="注册"
                           class="am-btn am-btn-primary am-btn-block am-btn-lg am-radius am-animation-slide-bottom log-animation-delay"/>
                </div>
            </form>
        </div>
    </div>

    <footer class="log-footer">
        <p style="margin: 30px; color: #2E2D3C">
            <time class="comment-time" th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}"></time> &copy;
            Powered By <a style="color: #0e90d2" rel="nofollow">CrazyStone</a></p>
    </footer>
</div>

<script type="text/javascript">
    //编写脚本
    //s 的意义：
    //s代表形参  checkUsername(this) 这里this代表实参 形参接受上面实参传过来的参数 也就是说：this=s
    function checkUsername(s) {
        //console.log(s.value)
        //利用Ajax进行操作  （无需刷新页面便可向服务器传输或读写数据） 这里应该属于异步操作
        $.ajax({
            //向服务器传递的请求地址
            url: "/checkUsername",
            //传递的内容（该内容必须是Jason格式（键值对格式））
            data: {"username": s.value},
            //向服务器传递请求的类型
            type: "get",
            //服务器的请求结束后 重新回到脚本进行操作 并且携带了一个参数（该参数是从服务器请求中返回的）：message
            success: function (message) {
                // var message=message;
                //判断参数是否为空
                if (message) {
                    // console.log(message)
                    //利用id绑定一个span元素 对其进行赋值
                    $("#errorUsername").text(message)
                    //利用id绑定输入框 使得光标无法离开只能停留在输入框中
                    $("#username").focus()
                } else {
                    // console.log(message)
                    //利用id绑定一个span元素 对其进行赋值
                    $("#error").text(" ")
                }
            }
        })
    }

    /**
     * 检查邮箱格式的脚本
     * @param s
     * @returns {boolean}
     */
    function checkEmailFormat(s) {
        var format = /^\w+(\.\w+)*@\w+\.\w+(\.\w+)*$/i;
        return format.test(s);
    }

    //编写脚本
    //s 的意义：
    //s代表形参  checkUsername(this) 这里this代表实参 形参接受上面实参传过来的参数 也就是说：this=s
    function checkFirstPassword(s) {
        // console.log(s.value)
        //利用Ajax进行操作  （无需刷新页面便可向服务器传输或读写数据） 这里应该属于异步操作
        $.ajax({
            //向服务器传递的请求地址
            url: "/checkFirstPassword",
            //传递的内容（该内容必须是Jason格式（键值对格式））
            data: {"firstPassword": s.value},
            //向服务器传递请求的类型
            type: "post",
        })
    }

    /**
     * 检查密码和确认密码是否输入一致
     * @param s
     */
    function checkSecondPassword(s) {
        // console.log(s.value)
        //利用Ajax进行操作  （无需刷新页面便可向服务器传输或读写数据） 这里应该属于异步操作
        $.ajax({
            //向服务器传递的请求地址
            url: "/checkSecondPassword",
            //传递的内容（该内容必须是Jason格式（键值对格式））
            data: {"secondPassword": s.value},
            //向服务器传递请求的类型
            type: "post",
            //服务器的请求结束后 重新回到脚本进行操作 并且携带了一个参数（该参数是从服务器请求中返回的）：message
            success: function (message) {
                // var message=message;
                //判断参数是否为空
                if (message) {
                    // console.log(message)
                    //利用id绑定一个span元素 对其进行赋值
                    $("#errorPassword").text(message)
                    //利用id绑定输入框 使得光标无法离开只能停留在输入框中
                    $("#checkPassword").focus()
                } else {
                    // console.log(message)
                    //利用id绑定一个span元素 对其进行赋值
                    $("#errorPassword").text(" ")
                }
            }
        })
    }
</script>


</body>
</html>